[#assign title]邀请好友[/#assign]
[#include "/common/_layout.html"/]
[#macro style]
<style>

    .wechat-share-popup {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        backface-visibility: hidden;
        text-align: center;
        color: #FFFFFF;
    }

    .wechat-share-popup .arrow {
        position: absolute;
        top: 0px;
        right: 30px;
        height: 82px;
    }

    .wechat-share-popup h1 {
        margin-top: 100px;
    }

    .qrcode-popup {
        width: 100%;
        height: 100%;
        background-color: #fff;
        padding: 10px 0;
    }
</style>
[/#macro]
[#macro body]
[#-- 这张图片是用于微信中分享时显示的缩略图 --]
<img src="${inviteLink}" style="width: 0px;height: 0px;position:absolute;">
<div class="row">
    <div class="col-12">
        <h4>推广介绍</h4>
        <p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;邀请好友,好友注册并充值后,会按比例返还现金给邀请人.
        </p>
    </div>
</div>
<template v-if="inviter.nickname">
    <mt-cell>
        <template slot="title">
            我的邀请人:
            <span class="text-danger">{{inviter.nickname}}</span>
        </template>
    </mt-cell>
</template>
<div class="row">
    <div class="col-12">
        <button type="button" class="btn btn-primary btn-block" @click="invite">立即邀请</button>
    </div>
    <div class="col-12">
        <p></p>
        <p>或复制下方链接发送给好友</p>
        <p>${inviteLink}</p>
    </div>
</div>
<div class="row">
    <div class="col-12 text-center">
        <a href="/invite/list">查看我邀请的好友</a>
    </div>
</div>
<mt-popup class="wechat-share-popup"
          v-model="wechatPopupVisible"
          position="right" :modal="false"
          @click.native="wechatPopupVisible = false">
    <img class="arrow" src="/static/images/customer/guide.png">
    <h1>点击右上角分享</h1>
</mt-popup>
<mt-popup class="qrcode-popup"
          v-model="qrcodePopupVisible"
          position="right" :modal="false"
          @click.native="qrcodePopupVisible = false">
    <div class="row">
        <div class="col-8 text-center offset-2">
            <img class="img-thumbnail" :src="showQrcodeImg"/>
        </div>
        <div class="col-12 text-center pt-3">
            <button type="button" class="btn btn-success" @click="qrcodePopupVisible = true">关闭</button>
        </div>
    </div>
</mt-popup>
[/#macro]
[#macro script]
<script src="/static/js/jweixin-1.2.0.js"></script>
<script>
    var isMicroMessenger = false;
    [#if (signature.appId)??]
    isMicroMessenger = window.navigator.userAgent.toLowerCase().indexOf('micromessenger') > -1;
    if (isMicroMessenger) {
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: '${signature.appId}',         // 必填，公众号的唯一标识
            timestamp: ${signature.timestamp?c}, // 必填，生成签名的时间戳
            nonceStr: '${signature.nonceStr}',   // 必填，生成签名的随机串
            signature: '${signature.signature}', // 必填，签名
            // 必填，需要使用的JS接口列表
            jsApiList: [
                'onMenuShareAppMessage',
                'onMenuShareTimeline',
                'onMenuShareQQ',
                'onMenuShareQZone'
            ]
        });
        var inviteTitle = '邀你一起';
        var inviteSummary = 'pai友圈邀请活动';
        var invitePic = '${invitePic}';
        var inviteLink = '${inviteLink}';
        var shareObject = {
            title: inviteTitle,  // 分享标题
            desc: inviteSummary, // 分享描述
            link: inviteLink,    // 分享链接
            imgUrl: invitePic,   // 分享图标
            type: 'link',        // 分享类型,music、video或link，不填默认为link
            dataUrl: '',         // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        };
        wx.ready(function () {
            //获取“分享给朋友”按钮点击状态及自定义分享内容接口
            wx.onMenuShareAppMessage(shareObject);
            //获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
            wx.onMenuShareTimeline(shareObject);
            //获取“分享到QQ”按钮点击状态及自定义分享内容接口
            wx.onMenuShareQQ(shareObject);
            //获取“分享到QQ空间”按钮点击状态及自定义分享内容接口
            wx.onMenuShareQZone(shareObject);
        });
    }
    [/#if]
    var app = new Vue({
        el: '#app',
        data: {
            qrcode: '',
            inviter: {},
            wechatPopupVisible: false,
            qrcodePopupVisible: false,
            isMicroMessenger: isMicroMessenger
        },
        methods: {
            invite: function () {
                var vm = this;
                if (vm.isMicroMessenger) {
                    vm.wechatPopupVisible = true;
                } else {
                    vm.qrcodePopupVisible = true;
                    axios.post('/invite/qrcode').then(function (response) {
                        var data = response.data;
                        if (!data.success) {
                            vm.$toast(data.message || '二维码生成失败,请稍候重试');
                            return;
                        }
                        vm.qrcode = data.data;
                    });
                }
            }
        },
        computed: {
            showQrcodeImg: function () {
                var url = this.qrcode;
                return url ? 'data:image/png;base64,' + url : '';
            }
        },
        mounted: function () {
            var vm = this;
            axios.post('/invite/inviter').then(function (response) {
                vm.inviter = response.data;
            });
        }
    });
</script>
[/#macro]